import {Image, StyleSheet, View} from 'react-native';
import emptyPng from '../assets/img/common/empty.png';
import {ObserverText} from './ObserverText';
import {dpw12, dpw180, dpw48, dpw92} from '../constants';
import {observer} from 'mobx-react-lite';
import {useGlobalStore} from '../mobx';

interface EmptyProps {
  type?: 'empty' | 'domine' | 'shelf' | 'history';
  style?: Record<string, any>;
}

const tKeyObj = Object.freeze({
  empty: 'emptyData',
  history: 'noData',
  domine: 'domainName',
  shelf: 'bookshelfEmpty',
});

export const Empty = observer((props: EmptyProps) => {
  const {type = 'empty'} = props;
  const {appConfig} = useGlobalStore();

  return (
    <View style={{...styles.box, minHeight: type === 'history' ? 1 : dpw180}}>
      <Image
        style={type === 'history' ? styles.history : styles.img}
        source={emptyPng}
        resizeMode="contain"
      />
      <ObserverText
        tKey={tKeyObj[type]}
        tOptions={
          ['domine', 'shelf', 'history'].includes(type)
            ? {domain: appConfig?.ForeverOfficialDomain}
            : {}
        }
        type="empty"
      />
    </View>
  );
});

const styles = StyleSheet.create({
  box: {
    width: '100%',
    alignItems: 'center',
    margin: 'auto',
    justifyContent: 'center',
  },
  img: {
    height: dpw92,
    marginBottom: dpw12,
  },
  history: {
    height: dpw48,
  },
});
